<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- 1.导入Vue的包 -->
    <script src="./lib/vue-2.4.0.js" type="text/javascript"></script>
  </head>

  <body>
    <!-- 将来new的Vue实例，会控制这个 元素中的所有内容 -->

    <!-- Vue 实例所控制的这个元素区域，就是我们的v -->
    <div id="app">
      <p>{{msg}}</p>
    </div>

    <script type="text/javascript">
      //2.创建一个vue实例
      // 当我们导入包之后，在浏览器的内存中(浏览器window对象)，就多了一个Vue构造函数
      // 注意：我们new出来的这个vm对象，就是我们MVVM中的VM调度者

      var vm = new Vue({
        el: "#app", //表示当我们 new 的这个Vue实例，要控制页面上的哪个区域
        // 这里的 data 就是 MVVM 中的 M, 专门用来保存 每个页面的数据的
        data: {
          //data属性中，存放的是el中要用到的数据 控制的区域用到的数据
          msg: "欢迎学习Vue" //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了
          // 【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
        }
      });
    </script>
  </body>
</html>
